<template>
    <div id="app">
        <router-view v-if="LOCAL.IS_LOGIN"/>
        <el-container v-else>
            <el-aside width="111px" style="overflow: hidden;">
                <nav-view class="app-nav-view" style="position: inherit;"></nav-view>
            </el-aside>
            <el-container>
                <el-header style="height: auto; padding: 0;margin-bottom: 1px;">
                    <div class="header-box">
                        <div class="b1">
                            <el-row>
                                <el-col :span="1.5">
                                    <i v-if="LOCAL.CHI" class='bx bx-chevron-left' @click="goBack">
                                    </i>
                                </el-col>
                            </el-row>
                        </div>
                        <el-row style="background-color: white;border-bottom: 1px solid #ccc;">
                            <el-col :span="18">
                                <app-header :isCHI="LOCAL.CHI" class="app-header"
                                            :title="LOCAL.TITLE_INFO"></app-header>
                            </el-col>
                            <el-col :span="6">
                                <div class="user-mng">
<!--                                    <div class="msg-icon">-->
<!--                                        <i class='bx bx-message-square'></i>-->

<!--                                    </div>-->
                                    <el-avatar :size="50"
                                               :src="LOCAL.USER_INF.avatarUrl"></el-avatar>
                                    <a>{{ LOCAL.USER_INF.nickName }}</a>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </el-header>
                <el-main style="padding: 0px;">
                    <div class="body-box">
                        <router-view/>
                    </div>
                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>


        <!--
        <nav>
          <router-link to="/">Home</router-link> |
          <router-link to="/about">About</router-link>
        </nav> -->

    </div>
</template>

<script>
import NavView from '@/components/main/NavView.vue'
import AppHeader from '@/components/main/AppHearderView.vue'
import LOCAL from "@/main"

export default {
    name: 'App',
    components: {
        NavView,
        AppHeader
    },
    data() {
        return {
            LOCAL,

        }
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        handleLoginSuccess() {
            this.isLogin = false
        }
    },
    //监听游标'$route'的变化
    watch: {
        '$route'(to) {

            switch (to.name) {
                case "interest": {
                    LOCAL.TITLE_INFO = "利率管理"

                    LOCAL.CHI = true;
                    console.log(LOCAL.CHI)
                    console.log(LOCAL.TITLE_INFO)

                    // this.$PATH = "/mine"
                }
                    break;
                case "mine": {
                    LOCAL.TITLE_INFO = "我"
                    LOCAL.CHI = false;
                    console.log(LOCAL.CHI)
                    console.log(LOCAL.TITLE_INFO)
                }
                    break;
            }

        }
    },
    mounted() {
        console.log(localStorage.getItem("TOKEN") ,">>>>>>TOKEN")
        if (localStorage.getItem("TOKEN") != null) {
            LOCAL.IS_LOGIN = false;
        }else{
            this.$message.info("请先登录")
            LOCAL.IS_LOGIN = true;
            this.$router.push("/login")
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

.user-mng {
    position: relative;
    display: flex;
    height: 11vh;
    align-self: center;
    align-items: center;
    justify-items: center;
    justify-content: right;
}

.user-mng .msg-icon {
    height: 30px;
    font-size: 30px;
    margin-right: 10px;
    color: #a9a9a9;
    line-height: 30px;
    text-align: center;
}

.user-mng a {
    margin-left: 10px;
    margin-right: 40px;
}

.b1 .bx-chevron-left {
    display: block;
    position: absolute;
    /* margin-left: 140px; */
    font-size: 30px;
    cursor: pointer;
    z-index: 10;
    color: #a9a9a9;
    height: 80px;
    line-height: 80px;
}

.app-nav-view {
    z-index: 3;
    height: 94vh;
}

.app-header {
    position: relative;
    z-index: 1;
}

.b1 {
    position: fixed;
    z-index: 2;
}

nav {
    padding: 30px;
}

.header-box {
    padding: 0px;
}

nav a {
    font-weight: bold;
    color: #2c3e50;
}

nav a.router-link-exact-active {
    color: #42b983;
}

.body-box {
    /* margin-top: 11.5vh; */
    z-index: 1;
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}
</style>